<template>
  <div id="main">
    <!-- 登录页面不加载导航等信息 -->
    <router-view v-if="hideLayoutRouteName.includes(route.name)" :key="router.currentRoute.value.fullPath"></router-view>

    <el-container v-else id="container">
      <header-compon :headerProps="headerProps">
        <!-- <template #notification>
          <div>通知</div>
        </template> -->
        <!-- <template #avatar>
          <div>头像</div>
        </template> -->
      </header-compon>

      <el-container>
        <el-aside width="200px" class="aside">
          菜单组件
          <!-- <Menu></Menu> -->
        </el-aside>
        <el-main id="content">
          <router-view :key="router.currentRoute.value.fullPath"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import HeaderCompon from '@common/components/vueHeader/index.vue'
import { useUser } from '@/store/user.js'
const router = useRouter()
const route = useRoute()
const userStore = useUser()
const hideLayoutRouteName=['login','reg']
console.log('userStore: ', userStore)
console.log('router: ', router)
const headerProps = reactive({
  title: '后台管理项目', // 一般为项目的名字
  titleWeight: '700',
  titleSize: '30px',
  height: '48px', // 头部的高度
  backgroundColor: '#eeeeee', // 头部的背景颜色
  showAvatar: true, // 是否展示用户头像组件
  avatarWidth: 25, // 头像的宽高
  avatar: 'http://minio.can.anchnet.com/coding-static-bucket-public/WM-TEXT-AVATAR-wSJopVLGNYYMxqLoMyEe.jpg', // 用户头像地址
  avatarDropDownTrigger: 'hover', // 用户头像触发下拉的方式 hover 或者 trigger
  avatarDropdownMenu: [
    {
      // 用户头像下拉的菜单
      text: '用户信息',
      value: 1,
      callback: (item) => {
        console.log('item: ', item)
        router.push('/userinfo')
      }
    },
    {
      text: '修改密码',
      value: 2,
      disabled:true,
    },
    {
      text: '注册',
      value: 3,
      callback: (item) => {
        router.push('/reg')
      }
    },
    {
      text: '退出',
      value: 4,
      divided: true,
      callback: (item) => {
        localStorage.clear()
        router.push('/login')
      }
    }
  ],
  user: storeToRefs(userStore).currentUser,
  showNotification: true, // 是否展示通知图标
  notificationIconSize: 20, // 通知消息的图标大小
  notificationNum: 10, // 通知消息条数
  handleNotificationCallBack: () => {
    // 点击了消息通知
  },
  showFullscreen:true,
})
</script>
<style scoped lang="scss">
#container,
#main {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}
.header {
  height: 48px;
  background: #ffffff;
  box-shadow: 0 1px #dadfe6;
}
#content {
  height: calc(100vh - 48px);
  width: calc(100vw - 200px);
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
